<!DOCTYPE html>

<html xmlns:th="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/screen.css" media="screen" />
    <link rel="stylesheet" href="css/jquery.treetable.css" />
    <link rel="stylesheet" href="css/jquery.treetable.theme.default.css" />
  </head>
  <body>
  	<style type="text/css">
  		.timeLine{width:300px}
  		.timeLine > div{height: 20px;width: 100%;position: relative;}
  		.timeLine > div > span{position: relative;float: left;height: 100%;display: block;}
  		.timeLine > div > span.otherTime{padding: 0;margin: 0;position: absolute;left: 0;top: 0;bottom:0}
  		.timeLine > div > span.otherTime:after{display: block;position: absolute;left:0;right: 0;top:50%;margin-top:-5px;border-bottom:10px solid rgb(170,170,170);content: "";}
        .outLine .thisTime span{position: absolute;right:-26px;top: 0;padding:0;margin: 0;}
        .thisTime span{padding:0 !important;margin: 0}
        .timeLine > div > span.thisTime
    {
      padding: 0;margin: 0;text-align: center;color:#fff;text-shadow: black 0.1em 0.1em 0.2em;
      background: #03A9F4;
      background: -moz-linear-gradient(top,  #03A9F4 0%, #03C8F4 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#03A9F4), color-stop(100%,#03C8F4));
      background: -webkit-linear-gradient(top,  #03A9F4 0%,#03C8F4 100%);
      background: -o-linear-gradient(top,  #03A9F4 0%,#03C8F4 100%);
      background: -ms-linear-gradient(top,  #03A9F4 0%,#03C8F4 100%);
      background: linear-gradient(to bottom,  #03A9F4 0%,#03C8F4 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03A9F4', endColorstr='#03C8F4',GradientType=0 );
    }

  	</style>
  	
    <div id="main">

      <table id="example-advanced">
        <caption style="text-align: left;">
          <a href="#" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">全部展开</a>
          <a href="#" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">全部收起</a>

          <div>
            <input type="text" id="traceId"/>
            <button id="seachBtn">搜索</button>
            <input type="text" id="sqlId"/>
            <button id="seachSqlBtn">搜索sql</button>
          </div>
        </caption>
        <thead>
          <tr>
            <th>rpcId</th>
            <th>开始时间</th>
            <th>应用名</th>
            <th>类型</th>
            <th>返回码</th>
            <th>服务端数据</th>
            <th>客户端数据</th>
            <th style='width: 200px'>服务名称</th>
            <th>方法名</th>
            <th>远程IP</th>
            <th>请求大小</th>
            <th>响应大小</th>
            <th>时间轴</th>
          </tr>
        </thead>
        <tbody id="mainBody"></tbody>
      </table>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.treetable.js"></script>
    <script th:inline="javascript">/*<![CDATA[*/
      var basePath = [[${basePath}]];
      $(function(){
      	$("#example-advanced").treetable({ expandable: true ,force:true});
      })
      $("#seachSqlBtn").click(function () {
          var sqlId = $("#sqlId").val();
          var baseUrl = "http://" + basePath + "/trace/sql/" + sqlId;
          window.open(baseUrl);
      });

      $("#seachBtn").click(function () {
          var traceId = $("#traceId").val();
          if(traceId){
              var baseUrl = "http://" + basePath + "/trace/data/" + traceId;
              $.ajax({
                  type: "GET",
                  url: baseUrl,
                  dataType: "json",
                  success: function(result){
											
                      $("#mainBody").html("");
                      var data = result.data;
                      if(data == null){
                          alert("链路不存在");
                      }
                      else{
                        var fitstList = true
                        var tbody = "";
                        var allTime = data.root.data.message.spans[1];
                        tableInit(data.root)
                        $("#mainBody").html(tbody)
                        $("#example-advanced").removeData("treetable")
                        $("#example-advanced").treetable({ expandable: true });

                        function tableInit(obj){
                            var objList = obj;
                            

                            if(fitstList){
                                fitstList = false;
                                var color = objList.data.message.resultCode != "调用成功" ? "#ff6600" : "none",
                                      outLine = objList.data.message.spans[1]/allTime*100 <=  8 ? "outLine" : "";
                                
                                tbody +=
                                    "<tr style='background-color:"+ color +"'  data-tt-id='"+ objList.data.nodeId +"' data-tt-parent-id='"+ objList.data.parentId +"'>" + "<td><span class='file'>"+ objList.data.nodeId +"</span>"
                                    +"</td>"+"<td>"+ formatDateTime(objList.data.message.startTime) +"</td>"
                                    +"<td>"+ objList.data.message.appname +"</td>"
                                    +"<td>"+ objList.data.message.rpcTypeName +"</td>"
                                   /* +"<td>"+ objList.data.message.rpcId +"</td>"*/
                                   /* +"<td title='"+ objList.data.message.traceName +"'><div style='width: 200px;overflow: hidden'>"+ objList.data.message.traceName +"</div></td>"*/
                                    +"<td>"+ objList.data.message.resultCode +"</td>"
                                    +"<td title='"+ objList.data.message.serverData +"'>"+ objList.data.message.serverData +"</td>"
                                    +"<td title='"+ objList.data.message.userData +"'>"+ objList.data.message.userData +"</td>"
                                    +"<td title='"+ objList.data.message.serviceName +"'><div style='width: 200px;overflow: hidden'>"+ objList.data.message.serviceName +"</div></td>"
                                    +"<td>"+ objList.data.message.methodName +"</td>"
                                    +"<td>"+ objList.data.message.remoteIp +"</td>"
                                    +"<td>"+ objList.data.message.requestSize +"</td>"
                                    +"<td>"+ objList.data.message.responseSize +"</td>"
                                    +"<td class='timeLine "+ outLine +"'><div><span class='otherTime' style='width:"+ (objList.data.message.spans[0]/allTime*100) +"%'></span><span class='thisTime' style='width:"+ (objList.data.message.spans[1]/allTime*100) +"%;left: "+ (objList.data.message.spans[0] / allTime) * 100 +"%'><span>"+ objList.data.message.spans[1] +"ms</span></span></div></td>"
                                    +"</tr>";
                                if(obj.childList != "" && obj.childList != undefined){
                                    tableInit(obj.childList)
                                }
                            }else{
                                for(var i = 0;i < objList.length; i++) {
                                    var title;
                                    if (objList[i].data.message.rpcType == 3) {
                                        if (objList[i].data.message.hasOwnProperty('sql') && objList[i].data.message.sql != "" && objList[i].data.message.sql != null) {
                                            title = objList[i].data.message.sql;
                                        }
                                        else {
                                            title = objList[i].data.message.userData;
                                        }
                                    }
                                    else {
                                        title = objList[i].data.message.userData;
                                    }

                                    var color = objList[i].data.message.resultCode != "调用成功" ? "red" : "none",
                                              outLine = objList[i].data.message.spans[1]/allTime*100 <=  8 ? "outLine" : "";
                                    tbody +=
                                        "<tr style='background-color:"+ color +"'  data-tt-id='"+ objList[i].data.nodeId +"' data-tt-parent-id='"+ objList[i].data.parentId +"'><td><span class='file'>"+ objList[i].data.nodeId +"</span></td>"
                                        +"<td>"+ formatDateTime(objList[i].data.message.startTime) +"</td>"
                                        +"<td>"+ objList[i].data.message.appname +"</td>"
                                        +"<td>"+ objList[i].data.message.rpcTypeName +"</td>"
                                       /* +"<td>"+ objList[i].data.message.rpcId +"</td>"*/
                                       /* +"<td title='"+ objList[i].data.message.traceName +"'><div style='width: 200px;overflow: hidden'>"+ objList[i].data.message.traceName +"</div></td>"*/
                                        +"<td>"+ objList[i].data.message.resultCode +"</td>"
                                        +"<td title='"+ objList[i].data.message.serverData +"'>"+ objList[i].data.message.serverData +"</td>"
                                        +"<td title='"+ title +"'>"+ objList[i].data.message.userData +"</td>"
                                        +"<td title='"+ objList[i].data.message.serviceName +"'><div style='width: 200px;overflow: hidden'>"+ objList[i].data.message.serviceName +"</div></td>"
                                        +"<td>"+ objList[i].data.message.methodName +"</td>"
                                        +"<td>"+ objList[i].data.message.remoteIp +"</td>"
                                        +"<td>"+ objList[i].data.message.requestSize +"</td>"
                                        +"<td>"+ objList[i].data.message.responseSize +"</td>"
                                        +"<td class='timeLine "+ outLine +"'><div><span class='otherTime' style='width:"+ (objList[i].data.message.spans[0]/allTime*100) +"%'></span><span class='thisTime' style='width:"+ (objList[i].data.message.spans[1]/allTime*100) +"%;left: "+ (objList[i].data.message.spans[0] / allTime) * 100 +"%'><span>"+ objList[i].data.message.spans[1] +"ms</span></span></div></td>"
                                        +"</tr>";
                                    if(objList[i].childList != "" && objList[i].childList != undefined){
                                        tableInit(objList[i].childList)
                                    }
                                }
                            }
                        }
                      }
                  }
              });
          }
      });
    //$("#example-advanced").treetable({ expandable: true });
    /*$("#example-advanced tbody").on("mousedown", "tr", function() {
        $(".selected").not(this).removeClass("selected");
        $(this).toggleClass("selected");
    });*/
    function formatDateTime(inputTime) {
        if(inputTime != null){
          var date = new Date(inputTime);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m):m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d):d;
          var h = date.getHours();
          h = h < 10 ? ('0' + h):h;
          var minute = date.getMinutes();
          var second = date.getSeconds();
          minute = minute < 10 ? ('0' + minute) : minute;
          second = second < 10 ? ('0' + second) : second;
          return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        }
        else {
            return "";
        }
    }
    /*]]>*/
    </script>
  </body>
</html>
